/*
  Date Range Picker Styles
  ------------------------------------------------------------------------------
*/

@import 'src/style/modules';

.range-picker {
  position: fixed;
  text-align: center;
  background-color: $g1-raven;
  border: $ix-border solid $c-pool;
  padding: 0 $ix-marg-b;
  border-radius: $ix-radius;
  z-index: 9999;
  height: 416px;
  
  .react-datepicker {
    font-family: $ix-text-font;
    font-size: $ix-text-base-1;
  }
  
  .range-picker--date-pickers {
    flex-wrap: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: $ix-marg-b;
    
    .range-picker--date-picker {
      margin: $ix-marg-a;

      .react-datepicker-wrapper,
      .react-datepicker__input-container {
        width: 100%;
      }

      .range-picker--popper-container {
        position: relative;
      }
    
      .range-picker--popper {
        position: relative !important;
        transform: none !important;
        @include no-user-select();

        .range-picker--calendar {
          background-color: transparent;
          border: none;
          color: $c-pool;
          display: inline-flex;
          flex-direction: row;

          .react-datepicker__month-container {
            background-color: $g3-castle;
            border-radius: 0 0 $ix-radius $ix-radius;
            width: 260px;
          }

          .react-datepicker__navigation {
            outline: none;
            cursor: pointer;
          }

          .react-datepicker__navigation--next {
            border-left-color: $g18-cloud;
          }

          .react-datepicker__navigation--previous {
            border-right-color: $g18-cloud;
          }
          
          .range-picker--day {
            color: $g7-graphite;

            &:hover {
              background-color: $c-laser;
              color: $g20-white;
            }
          }

          .range-picker--day-in-month {
            color: $g14-chromium;
            
            &:hover {
              background-color: $c-laser;
              color: $g20-white;
            }
          }

          .react-datepicker__day--selected {
            background-color: $c-pool;
            color: $g18-cloud;
          }

          .react-datepicker__triangle {
            display: none;
          }

          .react-datepicker__header {
            
            border-radius: 0;
            padding: 0;
            border: none;
            background: transparent;

            .react-datepicker__day-name {
              color: $c-rainforest;
              font-weight: 700;
            }
            
            .react-datepicker__current-month {
              width: 100%;
              border-radius: $ix-radius $ix-radius 0 0;
              background-color: $g4-onyx;
              color: $g18-cloud;
              font-weight: 700;
              height: $ix-marg-d;
              display: inline-flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
            }
          }
          
          .react-datepicker__time-container {
            width: 70px;
            border: none;
            margin-left: $ix-marg-a;
            border-radius: $ix-radius;
            background-color: transparent;
            overflow: hidden;
            
            .react-datepicker__header--time {
              width: 100%;
              border-radius: $ix-radius $ix-radius 0 0;
              background-color: $g4-onyx;
              font-weight: 700;
              height: $ix-marg-d;
              display: inline-flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
            }

            .react-datepicker-time__header {
              color: $g18-cloud;
            }

            .react-datepicker__time {
              background-color: transparent;

              .react-datepicker__time-box {
                width: 100%;
                background-color: $g3-castle;
                color: $g14-chromium;

                .react-datepicker__time-list {
                  font-size: $ix-text-base;

                  .react-datepicker__time-list-item:hover {
                    background-color: $c-laser;
                    color: $g20-white;
                  }

                  .react-datepicker__time-list-item--selected {
                    background-color: $c-pool;
                  }
                }
              }
            }
          }

        }
      }
    }
  }
}

.range-picker--dismiss {
  position: absolute;
  z-index: 5000;
  top: 0;
  right: 0;
  transform: translate(50%,-50%);
  width: 24px;
  height: 24px;
  outline: none;
  border-radius: 50%;
  background-color: $c-pool;
  transition: background-color 0.25s ease;
  border: 0;

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 13px;
    height: 3px;
    top: 50%;
    left: 50%;
    border-radius: 1px;
    background-color: $g20-white;
  }

  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  &:hover {
    background-color: $c-laser;
    cursor: pointer;
  }
}